<template>
	<e-popup :show="show" mode="bottom" round="20rpx">
		<view class="bg-white discount-box">
			<view class="e-p-20 e-flex-xy-center e-rela">
				<text>{{$t('order.优惠详情')}}</text>
				<image class="close-btn img-36 e-abso" :src="$staticPath('classify/close.png')" @tap="handleClose">
				</image>
			</view>
			<view class="e-flex e-flex-between e-p-20 e-m-b-20">
				<text class="e-font-32 c-333 fw-500">{{$t('order.抵扣优惠')}}</text>
				<view class="e-flex e-font-28 c-red">
					<template v-if="discountMoney">
						<text class="e-m-r-10">{{$t('classify.减')}}</text>
						<text>{{$unitEn}}</text>
						<text class="e-m-r-10">{{discountMoney}}</text>
					</template>
					<image v-if="isOpen === 1" class="img-36" :src="$staticPath('classify/selected-radio.png')" mode="">
					</image>
					<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleOpen(1)">
					</image>
				</view>
			</view>
			<template v-if="isOpen">
				<view class="e-m-b-20 e-p-30">
					<load-image :size="['100rpx']" :src="selectedCommodityUrl" v-if="selectedCommodityUrl">
					</load-image>
				</view>
				<view class="e-flex e-flex-between e-p-20" v-for="item in deductionStrategy" :key="item.id">
					<template>

						<view class="e-flex">
							<load-image :size="['80rpx']" :src="item.icon">
							</load-image>
							<text class="e-font-28 c-333 e-m-l-20">{{item.name}}</text>
						</view>
						<view v-if="!item.check && !item.deductMoney" class="e-flex text-right e-font-28 c-secondary">
							<text class="e-m-r-10">{{$t('order.账户余额不足')}}</text>
							<image v-if="deductionType === 'N'" class="img-36 e-m-l-20"
								:src="$staticPath('classify/radio.png')"></image>
							<image v-else class="img-36 e-m-l-20" :src="$staticPath('classify/checkbox.png')"></image>
						</view>
						<view class="e-flex text-right e-font-28 c-secondary" v-else>
							<template v-if="$isEnglishVersion">
								Deduct {{item.floatingMoney}} for {{$unitEn}}{{item.deductMoney}}
							</template>
							<template v-else>
								<text class="e-m-r-10">{{$t('classify.抵扣')}} {{item.floatingMoney}}</text>
								<text>{{$unitEn}}{{item.deductMoney}}</text>
							</template>
							<image v-if="deductionType === 'N'" class="img-36 e-m-l-20"
								:src="$staticPath(item.check ? 'classify/selected-radio.png' :'classify/radio.png'  )"
								@tap="handleSelct(item)"></image>
							<image v-else class="img-36 e-m-l-20"
								:src="$staticPath(item.check ? 'classify/checkbox-select.png' :'classify/checkbox.png'  )"
								@tap="handleSelct(item)"></image>
						</view>
					</template>
				</view>
			</template>
			<view class="e-flex e-flex-between e-p-20">
				<text class="e-font-32 c-333 fw-500">{{$t('order.不使用')}}</text>
				<image v-if="isOpen === 0" class="img-36" :src="$staticPath('classify/selected-radio.png')" mode="">
				</image>
				<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleOpen(0)">
				</image>
			</view>
			<view class="btn-box e-flex-xy-center" @tap="handleSubmit">
				<text class="fw-500 e-font-28 c-white">{{$t('common.确定')}}</text>
			</view>
		</view>
	</e-popup>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import type { DeductionStrategy } from '@/common/request/api'
	import { accAdd, numToFixed } from '@/common/utils'

	const props = withDefaults(defineProps<{
		show : boolean
		deductionType : string,
		selectedCommodityUrl : string,
		deputyMoneyDeduction ?: number,
		value?: DeductionStrategy[]
	}>(), {
		value: () => []
	})

	const emits = defineEmits(['update:value', 'update:show', 'submit'])

	const deductionStrategy = computed<DeductionStrategy[]>({
		get() {
			return props.value
		},
		set(v) {
			emits('update:value', v)
		}
	})

	const isOpen = ref(1)
	const discountMoney = ref<string|number>(0)

	watch(() => props.deputyMoneyDeduction, (val) => {
		isOpen.value = val ? 1 : 0
	})
	watch(() => props.show, () => {
		isOpen.value = props.deputyMoneyDeduction ? 1 : 0
	})


	const handleOpen = (type : number) => {
		isOpen.value = type
	}
	const handleGetDiscountMoney = () => {
		discountMoney.value = 0
		if (props.deductionType === 'N') {
			deductionStrategy.value?.some(item => {
				if (item.check) {
					discountMoney.value = item.deductMoney
					return item.check
				}
			})
		} else {
			deductionStrategy.value?.forEach(item => {
				if (item.check) discountMoney.value = numToFixed(accAdd(discountMoney.value, +item.deductMoney), 2)
			})
		}
	}
	const handleClose = () => {
		emits('update:show', false)
	}

	const handleSelct = (item : DeductionStrategy) => {
		if (props.deductionType === 'N') {
			deductionStrategy.value.forEach(strategy => {
				if (strategy.strategy === item.strategy) {
					strategy.check = true
				} else {
					strategy.check = false
				}
			})
		} else {
			item.check = !item.check
			deductionStrategy.value.some(strategy => {
				if (strategy.strategy === item.strategy) {
					strategy.check = item.check
					return true
				}
			})
		}
		handleGetDiscountMoney()
	}
	const handleSubmit = () => {
		emits('submit', deductionStrategy.value, isOpen.value)
	}


	watch(deductionStrategy, () => {
		discountMoney.value = 0
		handleGetDiscountMoney()
	}, {
		immediate: true
	})
</script>

<style lang="scss">
	.discount-box {
		border-radius: 20rpx 20rpx 0 0;

		.close-btn {
			top: 20rpx;
			right: 30rpx;
		}

		.btn-box {
			height: 80rpx;
			background: #F5222D;
			border-radius: 40rpx;
			margin: 30rpx;
		}
	}

	.img-100 {
		width: 200rpx;
		height: 200rpx;
	}
</style>